<!-- 介绍模板-->
<template>
  <div class="introduce-template">
    <!-- 简介标题-->
    <sn-row-has-two-col :left="22" :right="2">
      <div slot="one-col" class="to-flex">
        <span class="introduce-icon"></span>
        <sn-text :text="title" :font-size="20"/>
      </div>
      <el-button
          @click="toRemark"
          class="remark-button"
          slot="two-col"
          type="danger"
          round v-if="isRemark">
        写评论
      </el-button>
      <el-link
          @click="toShowAll"
          slot="two-col"
          v-if="showAll"
          :underline="false">
        <span class="all">全部</span>
        <span class="all-t"> ></span>
      </el-link>
    </sn-row-has-two-col>
    <div class="introduce-content">
      <slot name="introduce-content"/>
    </div>

    <!-- 评分弹框 -->
    <el-dialog
        title="提示"
        :visible.sync="addRemarkVisible"
        width="30%">
      <el-form
          @submit.native.prevent
          :model="remarkForm"
          :rules="remarkRule"
          ref="remarkForm"
          @keyup.enter.native="submitRemarkForm()"
          label-width="80px">
        <el-form-item label="评分" prop="score">
          <el-input v-model="remarkForm.score" placeholder="评分"/>
        </el-form-item>
        <el-form-item label="评价内容" prop="remark">
          <el-input v-model="remarkForm.remark" placeholder="评价内容"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="addRemarkVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitRemarkForm()">确 定</el-button>
        </span>

    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "IntroduceTemplate",
  components: {},
  data() {
    return {
      //评分
      remarkForm: {
        movieId: 0,
        score: '',
        remark: ''
      },
      remarkRule: {
        //限制输入数字1-10
        score: [
          {
            validator: (rule, value, callback) => {
              if (value > 10 || value < 0) {
                callback(new Error("请输入1-10的评分"));
              } else {
                callback();
              }
            },
            required: true,
            trigger: 'blur'
          }
        ]
      },
      addRemarkVisible: false,

    }
  },
  props: {
    title: {
      type: String,
      default: '剧情简介'
    },
    showAll: {
      type: Boolean,
      default: true
    },
    isRemark: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toShowAll() {
      this.$emit("toShowAll")
    },
    //提交表单
    submitRemarkForm() {
      this.$refs['remarkForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: `web/movie/remark/save`,
            method: 'post',
            data: this.$http.adornData({
              "userId": this.$store.state.user.userId,
              "movieId": this.$store.state.movieDetailInfo.movieId,
              "score": this.remarkForm.score,
              "remark": this.remarkForm.remark
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.addRemarkVisible = false
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    //去评分页面
    toRemark() {
      //先判断是否登录
      //测试
      let user = this.$store.state.user.userId
      if (this.$store.state.user.userId === 0) {
        //跳到login页面
        this.myUtils.toLoginMessage(this)
      } else {
        this.addRemarkVisible = true
      }
    },

  },
}
</script>

<style scoped>
.introduce-template {
  margin-top: 30px;
}

.introduce-icon {
  background-color: #409EFF;
  border: 2px solid #409EFF;
  margin-right: 10px;
}

.el-link.el-link--default:hover {
  color: #606266;
}

.all {
  font-size: 16px;
  color: #999;
  margin-right: 2px;
  margin-left: 15px;
}

.all-t {
  font-weight: bold;
}

.introduce-content {
  margin-top: 20px;
}

.remark-button {
  position: relative;
  bottom: 5px;
}
</style>
